<template>
  <div class="RightFzjkDetails bigTableStyle">
    <div class="elForm-box">
      <el-form
        ref="elForm"
        :model="formData"
        size="medium"
        label-width="1.2rem"
      >
        <el-row :gutter="15">
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="变电站名称:" prop="time">
                  <el-select
                    v-model="formData.cities"
                    placeholder="请选择所属地市"
                    clearable
                    filterable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in citiesOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="所属系统:" prop="">
                  <el-select
                    v-model="formData.substation"
                    placeholder="请选择下拉变电站"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in substationOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="所属区域:" prop="source">
                  <el-select
                    v-model="formData.sideShot"
                    placeholder="请选择测点名称"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in sideShotOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="设备名称:" prop="source">
                  <el-select
                    v-model="formData.system"
                    placeholder="请选择所属系统"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in systemOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="设备类型:" prop="time">
                  <el-select
                    v-model="formData.cities"
                    placeholder="请选择所属地市"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in citiesOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="是否推送:" prop="">
                  <el-select
                    v-model="formData.substation"
                    placeholder="请选择下拉变电站"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in substationOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="inspection-report-index-btn">
              <el-button type="primary">查询</el-button>
              <el-button type="primary" @click="submitForm">新建</el-button>
              <el-button type="primary">删除</el-button>
              <el-button type="primary" @click="modify">修改</el-button>
                 <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                 :on-progress="handleProgress"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button type="primary">模板导入</el-button>
              </el-upload>

              <el-button type="primary">模板导出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableed bigTableStyle">
      <el-table
      border
        :data="tableData"
        height="100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%;"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column
          prop="name"
          label="变电站名称"
          width="110"
          
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="区域名称"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="装置类型"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="装置名称"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="型号"
          min-width="50"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="安装位置"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="投运日期"
          width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="生产国家"
          min-width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="出厂编号"
          width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="出厂日期"
          width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="备注"
          min-width="80"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      >
      </el-pagination>
    </div>
     <el-dialog
      :title="PopUptitle"
      :visible.sync="dialogVisible"
      width="8.49rem"
      :before-close="handleClose"
    >
      <el-form
        ref="elForm"
        :model="PopUpformData"
        size="medium"
        label-width="1.2rem"
        class="popUp-from"
      >
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="变电站名称">
              <el-input v-model="PopUpformData.bdzmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="10">
            <el-form-item label="区域名称">
              <el-input v-model="PopUpformData.qymc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="装置类型">
              <el-input v-model="PopUpformData.zzlx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="10">
            <el-form-item label="装置名称">
              <el-input v-model="PopUpformData.zzmc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="型号">
              <el-input v-model="PopUpformData.xh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="10">
            <el-form-item label="安装位置">
              <el-input v-model="PopUpformData.azwz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="投运日期">
              <el-input v-model="PopUpformData.tyrq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="10">
            <el-form-item label="生产国家">
              <el-input v-model="PopUpformData.scgj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="出厂编号">
              <el-input v-model="PopUpformData.ccbh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="10">
            <el-form-item label="出厂日期">
              <el-input v-model="PopUpformData.ccrq"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" :span="10">
            <el-form-item label="备注">
              <el-input v-model="PopUpformData.bz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="buttom-box">
          <el-button type="primary">确定</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >取消</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class RightFzjkDetails extends Vue {
  //弹框状态
  public dialogVisible: boolean = false;
  //弹框表单
  public PopUpformData: object = {
    bdzmc: "",
    qymc: "",
    zzlx: "",
    zzmc: "",
    xh: "",
    azwz: "",
    tyrq: "",
    scgj: "",
    ccbh: "",
    ccrq: "",
    bz: "",
  };
  //弹框title
  public PopUptitle: string = "";

  //搜索框from表单数据
  formData = {
    cities: 1, //所属地市
    substation: 1, //变电站名称
    sideShot: 1, //测点名称
    system: 1, //所属系统
    refresh: 1,
  };
  citiesOptions = [
    {
      interval: "山东省国网公司",
      id: 1,
    },
  ];
  substationOptions = [
    {
      interval: "110kVxxx地变电站",
      id: 1,
    },
  ];
  sideShotOptions = [
    {
      interval: "xxx测点",
      id: 1,
    },
  ];
  systemOptions = [
    {
      interval: "xxxxxx系统",
      id: 1,
    },
  ];
  refreshOptions = [
    {
      interval: "其它类型",
      id: 1,
    },
  ];
  //选择数据
   public multipleSelection:Array<any>= []

      //模板导入
  public fileList:any= []
   handleRemove(file:any, fileList:any) {
        // console.log(file, fileList);
      }
      handlePreview(file:any) {
        // console.log(file);
      }
      handleExceed(files:any, fileList:any) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      }
      handleProgress(event:any, file:any, fileList:any){
        // console.log(event);
        // console.log(file);
        // console.log(fileList);
        
      }
  //table表格相关事件数据
  tableData = [
    {
      date: "1",
      name: "xxxxxx",
      address: "xxxxxxxxxxxxxxxxxxxxxxx",
    },
  ];
  //分页数据事件相关
  pages = {
    pageSize: 20,
    page: 5,
    totalSize: 120,
  };
   //表格数据
  handleSelectionChange(val:any) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
      }
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
  }
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //新建
  submitForm() {
    this.PopUptitle = "新建";
    this.dialogVisible = true;
    // console.log(333);
    
  }
  // 修改
  modify() {
    this.PopUptitle = "修改";
    (this.PopUpformData as any).bdzmc = "2";

    this.dialogVisible = true;
  }
  //关闭弹框
  handleClose() {
    this.dialogVisible = false;
  }
 
}
</script>

<style lang="scss" scoped>
.RightFzjkDetails {
  width: 100%;
  height: 100%;
  .elForm-box {
    padding: 0.24rem 0.2rem 0 0;
  }
  .inspection-report-index-btn {
    display: flex;
    padding-left: 0.3rem;
    padding-top: 0.02rem;
    .el-button + .el-button {
      margin-left: 0.1rem;
    }
  }
  .tableed {
    width: 100%;
    height: calc(100% - 2rem);
  }
  .paged {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .buttom-box {
    display: flex;
    justify-content: center;
    align-items: center;
    > .el-button {
      margin: 0 0.6rem;
    }
  }
}
</style>
<style lang="scss">
.RightFzjkDetails {
  .inspection-report-index-btn {
    .el-button {
      padding: 0.12rem 0.2rem;
    }
  }
  .el-form-item {
    margin-bottom: 0.22rem;
  }
  .el-form-item--medium .el-form-item__content,
  .el-form-item--medium .el-form-item__label {
    line-height: 0.36rem;
  }
  .popUp-from {
    .el-form-item {
      margin-bottom: 0.35rem;
    }
  }
  .el-dialog {
    // height: 5.88rem;
  }
  .el-dialog__body {
    height: calc(100% - 44px);
  }
       //导入
  .el-upload-list{
    display: none;
  }
  .el-upload{
    margin: 0 0.1rem;
  }
}
</style>
